import 'package:flutter/material.dart';
import 'package:flutter_reader/model/article.dart';
import 'package:flutter_reader/res/colors.dart';
import 'package:flutter_reader/ui/reader/battery_view.dart';
import 'package:flutter_reader/ui/reader/reader_config.dart';
import 'package:flutter_reader/utils/screen.dart';
import 'package:intl/intl.dart';

class ReaderView extends StatelessWidget {
  final Article article;
  final int page;
  final double topSafeHeight;

  ReaderView({this.article, this.page, this.topSafeHeight});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            child: Image.asset('img/read_bg.png', fit: BoxFit.cover)),
        _buildOverlayer(),
        _buildContent(article, page),
      ],
    );
  }

  // 内容
  Widget _buildContent(Article article, int page) {
    var content = article.stringAtPageIndex(page);
    if (content.startsWith('\n')) {
      content = content.substring(1);
    }
    return Container(
      color: Colors.transparent,
      margin: EdgeInsets.fromLTRB(15, topSafeHeight + ReaderConfig.topOffset,
          10, Screen.bottomSafeHeight + ReaderConfig.bottomOffset),
      child: Text.rich(
        TextSpan(children: [
          TextSpan(
              text: content,
              style: TextStyle(fontSize: ReaderConfig.instance.fontSize)),
        ]),
        textAlign: TextAlign.justify,
      ),
    );
  }

  // 顶部底部视图
  Widget _buildOverlayer() {
    var format = DateFormat('HH:mm');
    var time = format.format(DateTime.now());

    return Container(
      padding: EdgeInsets.fromLTRB(
          15, 10 + topSafeHeight, 15, 10 + Screen.bottomSafeHeight),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(article.title,
              style: TextStyle(fontSize: 14, color: MyColors.golden)),
          Expanded(child: Container()),
          Row(
            children: [
              BatteryView(),
              SizedBox(width: 10),
              Text(time,
                  style: TextStyle(fontSize: 11, color: MyColors.golden)),
              Expanded(child: Container()),
              Text('第${page + 1}页',
                  style: TextStyle(fontSize: 11, color: MyColors.golden)),
            ],
          ),
        ],
      ),
    );
  }
}
